<template>
  <div class="bed-arrang">
    <CustomTree ref="jshTreeRef" selectFirstNode title="请选择监室" api="/znjszd3/comm/getJshsByDwdm" :params="{ type: 'tree' }" @leaf-node-click="onNodeClick"></CustomTree>
    <div class="main-wrap" v-loading="loading">
      <template v-if="persons.length > 0 || beds.length > 0">
        <el-card body-class="my-card-body">
          <el-button type="primary"> <i class="iconfont icon-ziyouanpai"></i> 一键安排</el-button>
          <el-button type="primary" @click="clearBed"> <i class="iconfont icon-delete"></i> 清空</el-button>
          <!-- <el-button type="primary"> <i class="iconfont icon-xiangqian"></i> 向前补位</el-button> -->
          <!-- <el-button type="primary"> <i class="iconfont icon-daochu"></i> 导出床位excel</el-button> -->
          <el-button type="primary" @click="save"> <i class="iconfont icon-baocun"></i> 保存</el-button>
        </el-card>
        <el-card body-class="my-card-body" class="drag-area">
          <PersonsDraggable v-model:persons="persons" :showSelect="false" :draggable="true" />
          <el-divider>
            <el-icon><star-filled /></el-icon>
            拖动人员到对应床位
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <div ref="bedspaceRef" class="bedspace">
            <el-scrollbar height="500rem">
              <div class="bed-wrap">
                <DragDropArea class="bed" v-for="(bed, index) in beds" :key="index" @handleDrop="handleDrop($event, bed)">
                  <template v-slot:default="{ isDragover }">
                    <div :style="{ cursor: bed.xm ? 'pointer' : '' }" :class="{ usable: isDragover && !bed.xm, unusable: (isDragover && bed.xm) || (isDragover && bed.islock == 'true') }" class="name flex-center" @click="clear(bed)">
                      {{ bed.xm }}
                    </div>
                    <div class="bed-number flex-center" @click="lock(bed)">
                      {{ bed.cwh }}号床
                      <el-icon v-if="bed.islock == 'true'" size="18rem" color="gold"><Lock /></el-icon>
                    </div>
                  </template>
                </DragDropArea>
                <div class="bed add flex-center" @click="addBed">
                  <el-icon size="30"><CirclePlus /></el-icon>
                </div>
                <div v-if="beds.length > 0" class="bed del flex-center" @click="delBed">
                  <el-icon size="30"><Remove /></el-icon>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-card>
      </template>
      <CustomEmpty v-else height="965rem"></CustomEmpty>
    </div>
  </div>
</template>

<script setup name="bedArrang">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/index.js'
import { useEventListener } from '@/composables/event.js'
import { useDragDrop } from '@/composables/dragDrop.js'
const props = defineProps({})
const bedspaceRef = ref()
const loading = ref(false)
const currentRoom = ref({})
const persons = ref([])
const beds = ref([])
const dragSource = ref([])
const dropTarget = ref([])

onMounted(() => {})
const onNodeClick = (node) => {
  currentRoom.value = node
  getData()
}
const getData = () => {
  loading.value = true
  http('/znjszd3/ht/cwsz/getPsnsAndCw', 'get', {
    jsh: currentRoom.value.zddm
  })
    .then((res) => {
      persons.value = res.data.ryList
      beds.value = res.data.cwList
    })
    .finally(() => {
      loading.value = false
    })
}
const handleDrop = (dragData, bedInfo) => {
  const cwh = bedInfo.cwh
  const bed = beds.value.find((bed) => bed.cwh == cwh)
  if (bed.rybh || bed.islock == 'true') {
    return ElMessage.warning(cwh + '号床位有人或已被锁定')
  }
  bed.xm = dragData.xm
  bed.rybh = dragData.rybh
  // bed.personInfo = dragData
  const index = persons.value.findIndex((p) => p.rybh == dragData.rybh)
  persons.value.splice(index, 1)
}
const lock = (bed) => {
  if (bed.xm) return ElMessage.warning('床位有人不能锁定')
  loading.value = true
  http(
    '/znjszd3/ht/cwsz/lockCwById',
    'post',
    {
      id: bed.id,
      islock: bed.islock == 'true' ? 'false' : 'true'
    },
    false
  )
    .then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        bed.islock = bed.islock == 'true' ? 'false' : 'true'
      }
    })
    .finally(() => {
      loading.value = false
    })
}
//清空某个床位的人员
const clear = (bed) => {
  console.log(bed)
  if (bed.rybh) {
    persons.value.push({
      xm: bed.xm,
      rybh: bed.rybh
    })
    bed.rybh = ''
    bed.xm = ''
  }
}
//清空所有床位人员
const clearBed = () => {
  beds.value.forEach((bed) => {
    if (bed.rybh) {
      console.log(bed)
      persons.value.push({
        xm: bed.xm,
        rybh: bed.rybh
      })
      bed.rybh = ''
      bed.xm = ''
    }
  })
}
const save = () => {
  loading.value = true
  http(
    '/znjszd3/ht/cwsz/updatePsnCws',
    'post',
    {
      jsh: currentRoom.value.zddm,
      list: beds.value.map((bed) => {
        return {
          id: bed.id,
          xm: bed.xm || '',
          rybh: bed.rybh || ''
        }
      })
    },
    false
  )
    .then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        getData()
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const addBed = () => {
  loading.value = true
  http(
    '/znjszd3/ht/cwsz/addOneCw',
    'post',
    {
      jsh: currentRoom.value.zddm
    },
    false
  )
    .then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        getData()
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const delBed = () => {
  ElMessageBox.confirm('确定要删除床位吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http(
        '/znjszd3/ht/cwsz/delOneCw',
        'post',
        {
          jsh: currentRoom.value.zddm
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          ElMessage.success(res.message[0])
          getData()
        }
      })
    })
    .catch(() => {})
}
</script>
<style lang="scss" scoped>
.bed-arrang {
  width: 100%;
  height: 100%;
  position: absolute;

  top: 0;
  left: 0;
  display: flex;
  .main-wrap {
    width: calc(100% - 200px);
    padding: 8px;
    border: var(--el-border);
    ::v-deep(.el-card) {
      .my-card-body {
        padding: 13px !important;
        // border: 1px solid red;
      }
    }
    .drag-area {
      // border: 1px solid blueviolet;
      margin-top: 10px;
      height: calc(100% - 75px);
      .persons {
        height: 300px;
        border: var(--el-border);
        border-radius: 6px;
      }
      .bedspace {
        padding: 10px 5px 10px 10px;

        // height: 520px;
        border: var(--el-border);
        border-radius: 6px;

        .bed-wrap {
          margin-right: 15px;
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          grid-auto-rows: 100px;
          gap: 15px;
        }
        .bed {
          border: var(--el-border);
          border-radius: 4px;
          overflow: hidden;
          & * {
            // pointer-events: none;
          }
          &:hover {
            box-shadow: 0 0 10rem var(--el-color-primary-light-5);
          }
          &.somebody .bed-number {
            background-color: red;
          }
          &.nobody .bed-number {
            background-color: green;
          }
          &.add,
          &.del {
            cursor: pointer;
          }

          .name {
            height: 50%;
            font-size: 18px;
            font-weight: 700;

            &.usable {
              background-color: green;
            }
            &.unusable {
              background-color: red;
            }
          }
          .bed-number {
            position: relative;
            height: 50%;
            background: var(--el-color-primary-light-1);
            font-size: 26px;
            color: #fff;
            // pointer-events: auto;
            cursor: pointer !important;
            .el-icon {
              position: absolute;
              top: 15px;
              right: 25px;
            }
          }
          .el-icon {
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
